<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="" v-cloak v-loading="loading" element-loading-text="正在导入中...">
        <div class="tools">
            <div v-show="!showForm">                
                <enumeration-selector v-model="cat" cat="surround_cat" :popperAppendToBody="true"></enumeration-selector>
            </div>
            <div v-show="!showForm" class="right">

                <el-button size="small" @click="loadItems" icon="el-icon-refresh">刷新</el-button>

                <el-button :disabled="showForm" size="small" type="primary" icon="el-icon-upload2"
                    @click="autoImport">自动导入</el-button>

                <el-button :disabled="showForm" size="small" icon="el-icon-plus" type="primary"
                    @click="createNewHandle">手动添加</el-button>
            </div>
        </div>
        <el-divider></el-divider>

        <view class="empty" v-if="items.length === 0">还没有添加任何周边地点信息</view>
        <el-table v-show="!showForm" :data="resItem" style="width: 100%" fit @selection-change="(val) => (selection = val)">
            <el-table-column prop="id" label="ID" width="70"> </el-table-column>
            <el-table-column prop="title" label="地点名称">
                <template slot-scope="scope">
                    <div class="content">{{ scope.row.title }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地点地址">
                <template slot-scope="scope">
                    <div class="content">{{ scope.row.address }}</div>
                </template>
            </el-table-column>
            <el-table-column label="公开显示" width="100">
                <template slot-scope="scope">
                    <el-tag size="mini" :type=" scope.row.is_public ? 'success' : 'warning'">{{ scope.row.is_public ? '已显示' : '已隐藏' }}</el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="date" label="发证日期" width="200"> </el-table-column> -->
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-link target="_blank" type="primary" @click="editHandle(scope.row)">编辑</el-link>
                    <el-link target="_blank" type="danger" @click="deleteHandle(scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="!showForm" class="pager">
                <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
                    :page-sizes="[5,10, 20, 50, 100]" :page-size="per_page" :current-page.sync="current_page" @current-change="updateCurrentPage"
                    @size-change="updatePageSize" />
            </div>
        <SurroundForm v-on:quxiao="cancleHandle" v-show="showForm" @change="changeHandle" :item="currentItem" />
    </div>
</template>
  
<script>
import { getPostSurroundsList, deletePostSurrounds, autoImportPostSurrounds } from "@/api/post-surround.js";
import SurroundForm from "./SurroundForm.vue";
export default {
    components: { SurroundForm },
    data () {
        return {
            per_page: 20,
            total: 0,
            current_page: 1,
            items: [],
            resItem: [],
            loading: false,
            currentItem: {},
            showForm: false,
            cat: '',
        };
    },
    props: {
        postId: { type: Number, default: null },
    },

    watch: {
        postId: {
            immediate: true,
            handler (val, oval) {
                if (val) {
                    this.loadItems();
                }
            },
        },
        current_page: function (newVal, oldVal) {
            this.loadResItem()
        },
        per_page: function (newVal, oldVal) {
            this.loadResItem()
        },
        cat: {
            immediate: true,
            handler (val, oval) {
                this.current_page = 1
                this.loadResItem()
            },
        },
    },

    mounted: function () { },

    computed: {},

    methods: {
        updateCurrentPage(page){
            this.current_page = page;
        },
        updatePageSize(size){
            this.per_page = size || 10;
        },
        loadResItem(){
            if (this.cat) {
                var arr = this.items.filter( (item) => item.category == this.cat )
            } else {
                var arr = this.items
            }
            this.total = arr.length
            var start = (this.current_page - 1) * this.per_page;
            var end = start + this.per_page;
            this.resItem = arr.slice(start, end)
        },
        resetFormData: function () {
            // 情况表单数据
            this.currentItem = {
                post_id: this.postId,
                //   company: "",
                //   buildings: "",
                //   date: "",
                //   number: "",
            };
        },
        cancleHandle: function (e) {
            console.log(e)
            this.showForm = e
        },
        showFormHandle: function (e) {
            this.loading = false;
            this.showForm = true;
        },

        createNewHandle: function (e) {
            this.resetFormData();
            this.showFormHandle();
        },
        changeHandle: function () {
            this.$message.success("已保存");
            // this.page = 1;
            this.loadItems();
        },
        editHandle: function (item) {
            this.currentItem = item;
            this.showForm = true;
        },

        deleteHandle: function (item) {
            this.$confirm("确定要删除【" + item.title + "】吗?", "删除提示").then(() => {
                deletePostSurrounds(item.id).then((res) => {
                    this.loadItems();
                }).catch((err) => {
                    this.loading = false
                    console.log(err);
                });
            });
        },
        autoImport(){
            this.loading = true
            autoImportPostSurrounds(this.postId).then((resp)=>{
                this.loading = false
                if(resp.code != 0 ){
                    return
                }
                this.$message.success(resp.data)
                this.loadItems()
            }).catch((err) => {
                this.loading = false
                console.log(err);
            })
        },
        loadItems: function () {
            this.loading = true;
            var query = {
                post_id: this.postId,
            };
            getPostSurroundsList(query).then((resp) => {
                this.resetFormData();
                if (resp.status != 0) {
                    return false;
                }
                this.items = resp.data;
                this.total = resp.data.length;
                this.loadResItem()
                this.loading = false;
            });
        },
    },
};
</script>
  
<style scoped>
.tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.content{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
  